<template>
  <div>
    <div>child组件 - {{ name }}</div>
    <p>{{ doubleName }}</p>
  </div>
</template>

<script>
import { computed, toRefs } from "vue";
export default {
  props: ["name"],
  //todo 因为setup没有this，所以需要传入第一个参数props，才能使用
  //todo props参数不能解构，会消除响应式

  //todo setup还有第二个参数是context
  setup(props, { emit }) {
    //todo  toRefs用于props的解构
    const { name } = toRefs(props);
    const doubleName = computed(() => {
      return name.value + name.value;
    });

    // this.$emit("fn")
    // context.emit("fn");
    emit("fn");

    return { doubleName };
  },
};
</script>
